<template>
	<view class="all-box">
		<!-- 404页面 -->
		<view class="noData" v-if="netWorkType == 'none'"><noData @handle="refresh"></noData></view>
		<view v-if="netWorkType != 'none'">
		<view class="binding-box">
			<view class="phone-img">
				<image :src="OSS_HOST+'phone.png'" mode="widthFix" style="width: 200rpx;"></image>
			</view>
			<view class="explain-box">
				请绑定新的手机号
			</view>
			<view class="phone-list">
				<!-- 行 -->
				<view class="row">
					<view class="left-box">
						<view class="text">
							手机号
						</view>
						<view class="operation">
							<input type="text" value="" v-model="newphone" placeholder="请输入手机号"/>
						</view>
					</view>
					
					<view class="right-box">
						<!-- <view class="icon iconfont">
							&#xe62b;
						</view> -->
					</view>
				</view>
				<!-- 行 -->
				<view class="row">
					<view class="left-box">
						<view class="text">
							验证码
						</view>
						<view class="operation">
							<input type="text" value="" v-model="verification" placeholder="请输入验证码"/>
						</view>
					</view>
					
					<view class="right-box">
						<view class="text" v-if="countdown==0" @click="getVerCode()">
							获取验证码
						</view>
						<view class="textno" v-if="countdown==1">
							
							<tui-countdown :time="timeList" borderColor="#fff" :hours="false" :minutes="false" scale unitEn  :isColon="false" @end="endOfTime"></tui-countdown>
							<text>后可重试</text>
						</view>
					</view>
				</view>
				
			</view>
			<view class="btn">
				<button type="default" @click="BtnBinding" class="btn-binding theme-bgcolor">绑定</button>
			</view>
			
			
			
		</view>
		</view>
	</view>
</template>

<script>
	// 引入倒计时组件
	import {oss_host} from '@/config/config.js';	
	import uniCountdown from '@/components/tui-countdown/tui-countdown.vue'
	
	import Vue from 'vue'
	import { mapGetters } from 'vuex';
	export default{
		
		data() {
			return{
				// 新手机号
				newphone:'',
				// 验证码
				verification:'',
				// 倒计时
				countdown:0,
				timeList:60,
				// 图片
				phoneImg:'',
				// 图片链接站点
				OSS_HOST:oss_host,
			}
		},
		
		components:{
			uniCountdown
		},
		computed: {
				//注册网络状态
				...mapGetters(['netWorkType'])	
			},
		methods:{
			
			ClickCountdown(){
				const _this = this
				_this.countdown=1
				
				
				// 验证码请求接口书写
			},
			// 获取验证码按钮
			getVerCode(){
				// 使用验证码没见到倒计时
				//获取验证码
				const _this = this
				
				//正则用不了
				var r=/^[1][3,4,5,7,8,9][0-9]{9}$/;
								
				// if (!_this.mobile.match(r)) {
				//      uni.showToast({
				//         icon: 'none',
				// 		position: 'bottom',
				//         title: '手机号不正确'
				//     });
				//     return false;
				// }
				// console.log("获取验证码")
				
				var opt={
						url:'/sms/getVertify',
						data:{
								mobile:this.newphone,
								tpl_type:'user',
								option_type:'mb_bind_verify'
							},
						success:function(res){
										
							if(res.status==1){
								// _this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）		 
								//uni.setStorageSync('token',res.data.token);							
								uni.showToast({
										icon:'none',
										title:res.message,
										duration: 3000
								});
								_this.countdown=1													
							}else{
									console.log(res.message)
									uni.showToast({
										icon:'none',
										title:'手机号格式错误'
									});
							}
						}
				};
				
				_this.$service.GetApi(opt);
				
				
			},
			// 倒计时结束
			endOfTime: function() {
				const _this = this
				_this.countdown=0
				console.log("倒计时结束，事件执行")
			},
			// 点击绑定按钮
			BtnBinding(){
				// 验证码验证接口书写
				console.log("点击了绑定按钮")
				const _this = this
				var opt={
						url:'/user/bindMobile',
						data:{
								mobile:_this.newphone,
								code:_this.verification
							},
						success:function(res){
										
							if(res.status==1){
								uni.showToast({
										icon:'none',
										title:'设置成功',
										duration: 3000,
										success:function(){
											//返回		
											_this.$refer.setVilit('/packageUser/pages/user/security/security')
											_this.$refer.toUrl()																						
										}
								});
																					
							}else{
									_this.isRotate=false
									uni.showToast({
										icon:'none',
										title:res.message
									});
							}
						}
				};
				
				_this.$service.GetApi(opt);
				
				
			}
		}
		
	}
</script>

<style lang="scss">
	@import "./phone_binding.scss";
</style>

